<meta charset="UTF-8">
<div id="repair-record">
    <div class="demo-spin-container" v-if="isSpin">
        <Spin size="large" fix></Spin>
    </div>
    <Row style="margin:10px;height: 32px;">
        <div class="fl">
            <span>{{$t("reportForm.selectTime")}}:</span>
            <date-picker type="daterange" :value="dateVal" :editable="false" :clearable="false" @on-change="onChange" show-week-numbers style="width:300px" placement="bottom-start"></date-picker>
        </div>
        <div style="margin-left: 20px;" class="spans-wrap fl">
            <span class="cursor-pointer" @click="handleSelectdDate(0)" :style="{color: dayNumberType == 0 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.toDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(1)" :style="{color: dayNumberType == 1 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.yesterDay")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(3)" :style="{color: dayNumberType == 3 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.threeDays")}}</span> <b>｜</b>
            <span class="cursor-pointer" @click="handleSelectdDate(7)" :style="{color: dayNumberType == 7 ? '#2D8CF0' : '#515A6E'}">{{$t("reportForm.sevenDays")}}</span>
        </div>
    </Row>
    <Row style="margin:10px;height: 32px;">
        <div class="fl">
            <div>{{$t("reportForm.selectDev")}}:&nbsp;</div>
        </div>
        <div style="position: relative;width: 300px;" class="fl">
            <div class="search-wrapper" v-click-outside.capture="onClickOutside">
                <i-input v-model.trim="sosoValue" icon="ios-close-circle-outline" @on-change="sosoValueChange" @on-focus="focus" :placeholder="placeholder" @on-click="onClickIcon"></i-input>
                <transition name="fade">
                    <div class="search-item-wrapper" v-show="isShowMatchDev">
                        <ul id="ztree" class="ztree"></ul>
                    </div>
                </transition>
            </div>
        </div>
        <div style="margin-left:20px;" class="fl">
            {{$t("reportForm.selected")}}: <span v-text="selectedCount"></span>
        </div>
        <div style="margin-left:20px;" class="fl">
            <i-button @click="onClickQuery" icon="ios-search">{{$t("reportForm.query")}}</i-button>
        </div>
        <div class="rt">
            <i-button @click="exportTableData" icon="ios-search" type="primary">{{$t("reportForm.exportData")}}</i-button>
        </div>
    </Row>
    <div style="margin:10px;">
        <i-table :columns="columns" ref="table" :height="lastTableHeight" :data="tableData" :loading="loading"></i-table>
    </div>
    <div style="padding-left:10px;">
        <Page :total="total" show-total @on-change="changePage" :page-size="20" :current="currentIndex" />
    </div>
    <Modal v-model="repairModal" width="500">
        <p slot="header" style="color:#f60;text-align:center">
            <Icon type="ios-create-outline"></Icon>
            <span>{{$t("insure.editRepairInfo")}}</span>
        </p>
        <div style="text-align:center">
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("alarm.devNum")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    {{repairEdit.deviceid}}
                </i-col>
            </Row>

            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.repairItem")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.repairitem"></i-input>
                </i-col>
            </Row>

            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.repairFee")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.fee"></i-input>
                </i-col>
            </Row>

            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.repairShop")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.repairagent"></i-input>
                </i-col>
            </Row>

            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.repairAddress")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.repairaddress"></i-input>
                </i-col>
            </Row>

            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.repairShopPhone")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.repairphone"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.repairShopName")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.repairname"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.submitRepairName")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.submitrepairname"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("insure.submitRepairPhone")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.submitrepairphone"></i-input>
                </i-col>
            </Row>
            <Row style="margin:10px 0;">
                <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">{{$t("monitor.remarks")}} : &nbsp;</i-col>
                <i-col span="16" style="height: 100%;line-height:32px;text-align:left;">
                    <i-input v-model.trim="repairEdit.remark" style="width: 100%;"></i-input>
                </i-col>
            </Row>
        </div>
        <div slot="footer">
            <i-button type="primary" style="width: 100%" @click="editRepair">{{$t("header.submit")}}</i-button>
        </div>
    </Modal>
    <script>
        vueInstanse = new Vue({
            el: '#repair-record',
            i18n: utils.getI18n(),
            mixins: [treeMixin],
            data: {
                loading: false,
                isSpin: false,
                repairModal: false,
                repairEdit: {
                    deviceid: '',
                    repairitem: '', //维修项' ,
                    fee: '', //多少钱元,精确到小数点后2位
                    repairagent: '', //维修店名' ,
                    repairaddress: '', //维修店地址' ,
                    repairphone: '', //维修店联系电话' ,
                    repairname: '', //维修店联系人' ,
                    submitrepairname: '', //送修人员名字' ,
                    submitrepairphone: '', //送修人员电话' ,
                    remark: '', //备注' ,
                    repairrecordid: '',
                },
                dateVal: [DateFormat.longToDateStr(Date.now(), timeDifference), DateFormat.longToDateStr(Date.now(), timeDifference)],
                lastTableHeight: 100,
                groupslist: [],
                timeoutIns: null,
                columns: [{
                    type: 'index',
                    width: 60,
                }, {
                    title: vRoot.$t("alarm.devName"),
                    key: 'devicename'
                }, {
                    title: vRoot.$t("alarm.devNum"),
                    key: 'deviceid'
                }, {
                    title: vRoot.$t("insure.repairItem"),
                    key: 'repairitem'
                }, {
                    title: vRoot.$t("insure.repairFee"),
                    key: 'fee',
                }, {
                    title: vRoot.$t("insure.repairShop"),
                    key: 'repairagent'
                }, {
                    title: vRoot.$t("insure.repairAddress"),
                    key: 'repairaddress'
                }, {
                    title: vRoot.$t("insure.repairShopPhone"),
                    key: 'repairphone'
                }, {
                    title: vRoot.$t("insure.repairShopName"),
                    key: 'repairname'
                }, {
                    title: vRoot.$t("insure.deliveryTime"),
                    key: 'createtimeStr'
                }, {
                    title: vRoot.$t("insure.submitRepairName"),
                    key: 'submitrepairname'
                }, {
                    title: vRoot.$t("insure.submitRepairPhone"),
                    key: 'submitrepairphone'
                }, {
                    title: vRoot.$t("monitor.remarks"),
                    key: 'remark'
                }, {
                    title: vRoot.$t("alarm.action"),
                    width: 150,
                    render: function(h, parmas) {
                        return h(
                            'div', {}, [
                                h(
                                    'Button', {
                                        on: {
                                            click: function() {
                                                var row = parmas.row;
                                                vueInstanse.repairEdit.deviceid = row.deviceid;
                                                vueInstanse.repairEdit.repairitem = row.repairitem;
                                                vueInstanse.repairEdit.fee = row.fee;
                                                vueInstanse.repairEdit.repairagent = row.repairagent;
                                                vueInstanse.repairEdit.repairaddress = row.repairaddress;
                                                vueInstanse.repairEdit.repairphone = row.repairphone;
                                                vueInstanse.repairEdit.repairname = row.repairname;
                                                vueInstanse.repairEdit.submitrepairname = row.submitrepairname;
                                                vueInstanse.repairEdit.submitrepairphone = row.submitrepairphone;
                                                vueInstanse.repairEdit.remark = row.remark;
                                                vueInstanse.repairEdit.repairrecordid = row.repairrecordid;
                                                vueInstanse.repairModal = true;
                                                editObject = row;
                                            }
                                        },
                                        props: {
                                            size: 'small',
                                            type: 'info'
                                        }
                                    },
                                    vRoot.$t("monitor.edit")
                                ),
                                h(
                                    'Button', {
                                        on: {
                                            click: function() {
                                                vueInstanse.deleteRepairRecord(parmas.index, parmas.row);
                                            }
                                        },
                                        props: {
                                            size: 'small',
                                            type: 'error'
                                        },
                                        style: {
                                            marginLeft: '5px'
                                        }
                                    }, vRoot.$t("monitor.delete")
                                ),
                            ]
                        )
                    },
                }, ],
                tableData: [],
                currentIndex: 1,
                deviceName: '',
            },
            methods: {
                exportTableData: function() {
                    var columns = deepClone(this.columns);
                    var records = deepClone(this.records);
                    columns.pop();
                    records.forEach(function(item) {
                        item.deviceid = "\t" + item.deviceid;
                        item.submitrepairphone = "\t" + item.submitrepairphone;
                        item.createtimeStr = "\t" + item.createtimeStr;
                        item.devicename = "\t" + item.devicename;
                    });
                    this.$refs.table.exportCsv({
                        filename: '送修记录',
                        columns: columns,
                        data: records,
                        quoted: true,
                    });
                },
                editRepair: function() {
                    var url = myUrls.editRepaiRecord(),
                        me = this;
                    utils.sendAjax(url, this.repairEdit, function(resp) {
                        if (resp.status == 0) {
                            me.repairModal = false;
                            me.$Message.success("编辑成功");
                            editObject.repairitem = me.repairEdit.repairitem;
                            editObject.fee = me.repairEdit.fee;
                            editObject.repairagent = me.repairEdit.repairagent;
                            editObject.repairaddress = me.repairEdit.repairaddress;
                            editObject.repairphone = me.repairEdit.repairphone;
                            editObject.repairname = me.repairEdit.repairname;
                            editObject.submitrepairname = me.repairEdit.submitrepairname;
                            editObject.submitrepairphone = me.repairEdit.submitrepairphone;
                            editObject.remark = me.repairEdit.remark;
                            editObject.repairrecordid = me.repairEdit.repairrecordid;

                        } else {
                            me.$Message.error("编辑失败");
                        }
                    })
                },
                deleteRepairRecord: function(index, row) {
                    var url = myUrls.deleteRepairRecord(),
                        repairrecordid = row.repairrecordid;
                    var data = {
                            repairrecordid: repairrecordid
                        },
                        me = this;
                    utils.sendAjax(url, data, function(respData) {
                        console.log(respData)
                        if (respData.status == 0) {
                            me.tableData.splice(index, 1);
                            var idx = null;
                            me.records.forEach(function(item, index) {
                                if (item.repairrecordid == repairrecordid) {
                                    idx = index;
                                }
                            });
                            if (idx !== null) {
                                me.records.splice(idx, 1);
                            }
                        } else {
                            me.$Message.error('删除失败');
                        }
                    })
                },

                changePage: function(index) {
                    var offset = index * 20;
                    var start = (index - 1) * 20;
                    this.currentIndex = index;
                    this.tableData = this.records.slice(start, offset);
                },
                calcTableHeight: function() {
                    var wHeight = window.innerHeight;
                    if (wHeight < 760) {
                        wHeight = 760;
                    }
                    this.lastTableHeight = wHeight - 210;
                },
                onClickQuery: function() {
                    var deviceids = [];
                    this.checkedDevice.forEach(function(group) {
                        if (!group.children) {
                            if (group.deviceid != null) {
                                deviceids.push(group.deviceid);
                            }
                        }
                    });
                    if (deviceids.length > 0) {
                        var me = this;
                        var url = myUrls.queryRepairRecords();
                        var data = {
                            startday: this.dateVal[0],
                            endday: this.dateVal[1],
                            offset: timeDifference,
                            deviceids: deviceids
                        }
                        me.loading = true;
                        utils.sendAjax(url, data, function(resp) {
                            console.log(resp);
                            me.loading = false;
                            if (resp.status === 0) {
                                if (resp.records.length) {
                                    var records = [],
                                        index = 1;
                                    resp.records.forEach(function(item) {
                                        item.records.forEach(function(record) {
                                            record.index = index;
                                            record.devicename = vstore.state.deviceInfos[record.deviceid] ? vstore.state.deviceInfos[record.deviceid].devicename : record.deviceid;
                                            record.createtimeStr = DateFormat.longToLocalDateTimeStr(record.createtime);
                                            records.push(record);
                                            index++;
                                        })
                                    });

                                    me.tableData = records.slice(0, 20);
                                    me.records = records;
                                    me.total = records.length;

                                } else {
                                    me.tableData = [];
                                    me.total = 1;
                                    me.records = [];
                                };
                                me.currentIndex = 1;
                            } else {
                                me.tableData = [];
                            }
                        })
                    } else {
                        this.$Message.error(this.$t("reportForm.selectDevTip"));
                    }
                },
                queryDevicesTree: function() {
                    var me = this;
                    this.isSpin = true;
                    GlobalOrgan.getInstance().getGlobalOrganData(function(rootuser) {
                        me.isSpin = false;
                        me.initZTree(rootuser);
                    })
                },
            },
            mounted: function() {
                var me = this;
                this.records = [];
                this.queryDevicesTree();
                this.calcTableHeight();
                window.onresize = function() {
                    me.calcTableHeight();
                }
            }
        })
    </script>
</div>